<template lang="html">

  <div class="cash-reward">
    <mt-header title="提现奖励金" fixed>
      <mt-button icon="back" slot="left" class="btn-back" @click="$router.go(-1)"></mt-button>
      <div slot="right">
          <mt-button icon="more"></mt-button>
      </div>
    </mt-header>

     <div class="main">

      <section class="reward-money">
        <div class="title">可提现金额为：</div>
        <div class="available-money">{{my_reward}}</div>
      </section>

      <section class="cash">
        <div class="title">请输入想提现的金额：</div>
        <div class="title">提现手续费为{{tx_fee * 100}}%：</div>
        <div>
          <input type="text" class="cash-money" v-model="cash_money"> 元
        </div>
        <mt-button class="btn-cash" @click="btnCash">确定</mt-button>
      </section>

    </div>
  </div>

</template>

<script>
import { applyTixian, getUserCaptial } from '@/api/user'
import { Toast } from 'mint-ui'

export default {

  data(){
    return {
      cash_money: null,
      my_reward: '0',
      tx_fee: '0.05'
    }
  },
  methods: {
    btnCash(){
      applyTixian({amount: this.cash_money}).then(res => {
          if (res.code === 1) {
            Toast('提现成功, 请等待！')
          } else {
            Toast(res.message)
          }
      })
    },
  },
  created () {
    getUserCaptial().then(res => {
      if (res.code === 1) {
        this.my_reward = res.data.reward
        this.tx_fee = res.data.tx_fee
      }
    })
  }

}
</script>

<style lang="less" scoped>

  .cash-reward{

    .main{
      width: 100%;
      font-size: 3.2vw;
      margin-top: 40px;

      .flex{
        display: -ms-flex;
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        -ms-flex-wrap: wrap;
        flex-wrap: wrap;
        -ms-flex-pack: distribute;
      }

      .reward-money{
        padding: 2vw 1.5vh;
        color: #ececec;
        background: rgb(0,175,255);

        >div{
          margin-bottom: 1.5vh;

          &:last-child{
            margin-bottom: 0;
          }

        }

        .title{

        }

        .available-money{
          padding-left: 2vw;
          font-size: 4.5vw;
          color: #fff;
        }

        .info{

        }

      }

      .cash{
        padding: 2vw 1.5vh;

        >div{
          margin-bottom: 2vw;
        }

        .title{

        }

        .cash-money{
          border: 0.13vw solid #ddd;
          vertical-align: top;
          padding: 0.2vh 2vw;
          margin-right: 5vw;
        }

        .btn-cash{
          padding: 0.85vh 3.6vw;
          font-size: 3.4vw;
          height: auto;
          border-radius: 0.8vw;
          width: 100%;
          background: #00afff;
          color: #fff;
        }

      }


    }

  }


</style>
